<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button type="success" @click="handleCreate">&emsp;新增&emsp;</el-button>
            </div>
            <div class="item">
                <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <!-- <el-table-column type="selection"></el-table-column> -->
                    <el-table-column prop="id" label="ID"> </el-table-column>
                    <el-table-column prop="title" label="等级"> </el-table-column>
                    <el-table-column prop="exp" label="经验"> </el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scoped">
                            <el-tag v-if="scoped.row.status === 0" type="danger">不展示</el-tag>
                            <el-tag v-else-if="scoped.row.status === 1" type="success">展示</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)" plain>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <cus-pagination
                    :total="total"
                    :page.sync="listQuery.page"
                    :limit.sync="listQuery.per_page"
                    @pagination="getList"
                />
            </div>
        </el-card>

        <!-- 删除弹框 -->
       <el-dialog
            title="确定删除吗?"
            :visible.sync="deleteDialogVisible"
            width="435px"
            >
            <span style=""><em style="font-style:normal;color:red">删除后不可恢复</em>，你还要继续吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog  v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" >
            <el-form :model="editRulesForm" :rules="editRulesFormRules" ref="editRulesForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="editRulesForm.title" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="等级数" prop="number">
                    <el-input v-model="editRulesForm.number" placeholder="请输入等级数"></el-input>
                </el-form-item>
                <el-form-item label="经验值" prop="exp">
                    <el-input v-model="editRulesForm.exp" placeholder="请输入所需最低经验值"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="editRulesForm.status" :label="1">展示</el-radio>
                    <el-radio v-model="editRulesForm.status" :label="0">不展示</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogFormVisible = false">返回</el-button>
                    <el-button type="primary" @click="submitForm('editRulesForm')">提交</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    listData,
    detailData,
    addData,
    deleteData
} from '@/api/contacts/contactsGrade'

export default {
    data(){
        return{
            editRulesFormRules:{
                number:[{required:true,message:'请输入等级数',trigger:'blur'}],
                exp:[{required:true,message:'请输入所需最低经验值',trigger:'blur'}],
            },
            editRulesForm:{
                id:undefined,
                title:undefined,
                number:undefined,
                exp:undefined,
                status:1,
            },

            gift_type_list:[],
            color_list:[],
            reward_list:[],
            status_list:[],

            dialogStatus: '',
            // dialog的头部信息
            titleMap: {
                update: '编辑',
                create: '新增'
            },
            dialogFormVisible:false,
            deleteDialogVisible:false,
            listLoading:false,
            menuList:[],
            limitList:[],
            listQuery:{
                page:1,
                per_page:10,
            },
            total:0,
            // 勾选内容
            multipleSelection: [],
            // 要删除的内容的ids
            dataIds:'',
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            this.listLoading = true;
            let urlData = "?";
            if (this.listQuery.page) {
                urlData = urlData + `page=${this.listQuery.page}&`;
            }
            if (this.listQuery.per_page) {
                urlData = urlData + `per_page=${this.listQuery.per_page}`;
            }
            listData(urlData).then((response) => {
                this.menuList = response.data.list;
                this.total = response.data.total;
                this.listLoading = false
            })
        },
        detailList(){
            detailData().then(response => {
                this.gift_type_list = response.data.gift_type_list
                this.color_list = response.data.color_list
                this.reward_list = response.data.reward_list
                this.status_list = response.data.status_list

                this.gift_type_list.map((item,index)=>{
                    if(item.id === 0){
                        return undefined
                    }else {
                        return item.id
                    }
                })
            })
        },

        // 点击新增
        handleCreate(){
            this.resetForm('editRulesForm')
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
        },
        // 点击编辑
        handleUpdate(row){

            this.editRulesForm.id = row.id
            this.editRulesForm.title = row.title;
            this.editRulesForm.number = row.number;
            this.editRulesForm.exp = row.exp;
            this.editRulesForm.status = row.status;

            this.dialogStatus = 'update'
            this.dialogFormVisible = true
        },
        // 重置表单内容
        resetForm(formName) {
            this.$nextTick(()=>{
                // this.$refs[formName].resetFields();
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
                this.editRulesForm = {
                    id:undefined,
                    title:undefined,
                    number:undefined,
                    exp:undefined,
                    status:1,
                }
            })

        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    if(this.dialogStatus === 'create'){
                        let formData = new FormData()
                        for(let item in this.editRulesForm){this.editRulesForm[item] === undefined? '':formData.append(item, this.editRulesForm[item]);}
                        addData(this.editRulesForm).then(response => {
                            if (response.code === 200) {
                                this.getList()
                                this.dialogFormVisible = false;
                                this.$notify({
                                    type:'success',
                                    message: '操作成功',
                                    position: 'bottom-right',
                                    showClose: false,
                                    duration: 3000
                                });
                            }
                        })
                    }else {
                        let formData = new FormData()
                        for(let item in this.editRulesForm){this.editRulesForm[item] === undefined? '':formData.append(item, this.editRulesForm[item]);}
                        addData(formData).then(response => {
                            if (response.code === 200) {
                                this.getList()
                                this.dialogFormVisible = false;
                                this.$notify({
                                    type:'success',
                                    message: '操作成功',
                                    position: 'bottom-right',
                                    showClose: false,
                                    duration: 3000
                                });
                            }
                        })
                    }
                } else {

                    return false;
                }
            });
        },
        // 点击单个删除
        handleDelete(row) {
            this.dataIds = {ids:`${row.id}`}
            this.deleteDialogVisible = true
        },
        // 确定删除
        confirmDelete(){
            // this.dataIds)
            deleteData(this.dataIds).then((response) => {
                if (response.code === 200) {
                    this.getList()
                    this.deleteDialogVisible = false;
                    this.$notify({
                        type:'success',
                        message: '操作成功',
                        position: 'bottom-right',
                        showClose: false,
                        duration: 3000
                    });
                } else {
                    this.$message({
                        message: response.message,
                        type: 'error'
                    });
                }
            })
        },
    }
}
</script>

<style>

</style>
